<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="140" class="search-form">
                <Form-item label="项目名称" prop="">
                  <Input v-model="searchForm.project_name" style="width: 260px;"/>
                </Form-item>
                <Form-item style="margin-left:-100px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </Form-item>
              </Form>
            </Row>
            <Row class="operation">
              <Button @click="addSituation" type="primary" icon="md-add">添加项目概况</Button>
              <Button @click="editSituation" type="warning" icon="ios-bookmarks-outline" >编辑项目概况</Button>
              <Button @click="viewMaterial" type="success" icon="ios-eye" >查看项目物料</Button>
              <Dropdown @on-click="handleDropdown">
                <Button>
                  更多操作
                  <Icon type="md-arrow-dropdown" />
                </Button>
                <DropdownMenu slot="list">
                  <DropdownItem name="editMaterial">编辑项目物料</DropdownItem>
                  <DropdownItem name="exportBWData">导出物料到博微格式</DropdownItem>
                  <DropdownItem name="designContent">项目设计说明书</DropdownItem>
                  <DropdownItem name="designDocment">项目设计文档</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Button @click="refresh" icon="refresh">刷新</Button>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
              <Table :columns="exportColumns" :data="exportBWData" ref="exportTable" style="display:none"></Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
      <Modal title="添加项目概况" v-model="addSituationVisible" :mask-closable='false' :width="500" :styles="{top: '200px'}">
        <Form ref="situationForm" :model="situationForm" :label-width="100">
          <FormItem label="项目名称" prop="project_id" class="margin-bottom-3">
            <Select v-model="situationForm.project_id" clearable filterable style="width:320px">
              <Option v-for="(item,index) in projectNameList" :value="item.id" :key="index">
                <!-- [{{ item.project_code }}] <span style="color: #c3c3c3">{{ item.project_name }}</span> -->
                {{item.project_name}}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="电压等级" prop="voltage" class="margin-bottom-3">
            <Select v-model="situationForm.voltage" clearable filterable style="width:320px">
              <Option v-for="item in voltageList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="线路长度" prop="line_length" class="margin-bottom-3">
            <Input v-model="situationForm.line_length" style="width: 320px"/>
          </FormItem>
          <FormItem label="架设方式" prop="erection_way" class="margin-bottom-3">
            <Select v-model="situationForm.erection_way" clearable filterable style="width:320px">
              <Option v-for="item in erectionList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="排列方式" prop="arrange_way" class="margin-bottom-3">
            <Select v-model="situationForm.arrange_way" clearable filterable style="width:320px">
              <Option v-for="item in arrangeList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="导线型号" prop="wire" class="margin-bottom-3">
            <Input v-model="situationForm.wire" style="width: 320px"/>
          </FormItem>
          <FormItem label="配变架设" prop="transformer_way" class="margin-bottom-3">
            <Select v-model="situationForm.transformer_way" clearable filterable style="width:320px">
              <Option v-for="item in transformerList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="地形" prop="terrain" class="margin-bottom-3">
            <Select v-model="situationForm.terrain" clearable filterable style="width:320px">
              <Option v-for="item in terrainList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="cancelSituation">取消</Button>
          <Button type="primary" :loading="submitLoading" @click="submitNewSituation">提交</Button>
        </div>
      </Modal>
      <editSituation :data="situationForm" :situationParams="situationParams" v-model="editSituationVisiable" @on-submit="refresh"/>
      <viewMaterial :data="materialList" :projectParams="projectParams" v-model="viewMaterialVisiable" />
      <editMaterial :data="materialList" :projectParams="projectParams" v-model="editMaterialVisiable" />
      <viewDesignContent :data="designContent" v-model="viewDesignContentVisiable" />
      <viewDesignDocment :data="designContent" v-model="viewDesignDocmentVisiable" />
    </div>
  </div>
</template>
<script>
import { getSituationParams, getSituationList, getNewSituationProject, insertProjectSituation, 
        getProjectMaterial, getProjectMaterialDefine, getDesignContent, getDesignSheets } from '@/api/project';
import util from '@/libs/util';
import editSituation from './editSituation';
import viewMaterial from './viewMaterial';
import editMaterial from './editMaterial';
import viewDesignContent from './viewDesignContent';
import viewDesignDocment from './viewDesignDocment';
import moment from 'moment';
export default {
  name: 'project-situation-manager',
  components: {
    editSituation, viewMaterial, editMaterial,viewDesignContent, viewDesignDocment
  },
  data() {
    return {
      loading: false,
      searchForm: {
        project_name: '',
        pageNumber: 1,
        pageSize: 10
      },
      projectNameList: [],
      voltageList: [],
      erectionList: [],
      arrangeList: [],
      transformerList: [],
      terrainList: [],
      situationParams: [],
      projectParams: {},
      data: [],
      total: 0,
      selectCount: 0,
      exportData: [],
      exportBWData: [],
      selectList: [],
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          title: '项目编号',
          key: 'project_code',
          width: 140
        },
        {
          title: '项目名称',
          key: 'project_name',
          width: 200
        },
        {
          title: '容量(kVA)',
          key: 'allow_capacity',
          width: 80,
          align: 'center'
        },
        {
          title: '电压等级',
          key: 'voltage',
          width: 80,
          align: 'center',
          render: (h, params) => {
            let re = "";
            if (params.row.voltage === 1) {
              re = "10KV";
            } else if (params.row.voltage === 2) {
              re = "0.4KV";
            }
            return h("div", re);
          }
        },
        {
          title: '线路长度(km)',
          key: 'line_length',
          width: 100,
          align: 'right'
        },
        {
          title: '架设方式',
          key: 'erection_way',
          width: 80,
          align: 'center',
          render: (h, params) => {
            let re = "";
            if (params.row.erection_way === 1) {
              re = "架空";
            } else if (params.row.erection_way === 2) {
              re = "地埋";
            }
            return h("div", re);
          }
        },
        {
          title: '金具排列',
          key: 'arrange_way',
          width: 80,
          align: 'center',
          render: (h, params) => {
            let re = "";
            if (params.row.arrange_way === 1) {
              re = "三角排列";
            } else if (params.row.arrange_way === 2) {
              re = "水平排列";
            }
            return h("div", re);
          }
        },
        {
          title: '导线型号',
          key: 'wire',
          width: 160
        },
        {
          title: '配变架设',
          key: 'transformer_way',
          width: 80,
          align: 'center',
          render: (h, params) => {
            let re = "";
            if (params.row.transformer_way === 1) {
              re = "杆架式";
            } else if (params.row.transformer_way === 2) {
              re = "室内";
            } else if (params.row.transformer_way === 3) {
              re = "屋面";
            } else if (params.row.transformer_way === 4) {
              re = "箱式变";
            }
            return h("div", re);
          }
        },
        {
          title: '地形',
          key: 'terrain',
          width: 80,
          align: 'center',
          render: (h, params) => {
            let re = "";
            if (params.row.terrain === 1) {
              re = "平原";
            } else if (params.row.terrain === 2) {
              re = "丘陵";
            } else if (params.row.terrain === 3) {
              re = "一般山地";
            } else if (params.row.terrain === 4) {
              re = "泥沼";
            } else if (params.row.terrain === 5) {
              re = "沙漠";
            } else if (params.row.terrain === 6) {
              re = "高山";
            }
            return h("div", re);
          }
        },
        {
          title: '添加人',
          key: 'real_name',
          width: 80,
          align: 'center'
        },
        {
          title: '添加日期',
          key: 'add_time',
          width: 90,
          align: 'center',
          render: (h, params) => {
            let re = moment(params.row.add_time).format('YYYY-MM-DD');
            return h("div", re);
          }
        },
      ],
      exportColumns: [
        {
          title: '类型',
          key: 'type',
        },
        {
          title: '编号',
          key: 'code',
        },
        {
          title: '名称',
          key: 'name',
        },
        {
          title: '规格型号',
          key: 'stype',
        },
        {
          title: '单位',
          key: 'unit',
        },
        {
          title: '数量',
          key: 'count',
        },
        {
          title: '单重（kg）',
          key: 'weight',
        },
        {
          title: '市场价含税',
          key: 'tax_price',
        },
        {
          title: '市场价不含税',
          key: 'no_tax_price',
        },
        {
          title: '类别/运输类型',
          key: 'discription',
        },
      ],
      addSituationVisible: false,
      editSituationVisiable: false,
      viewMaterialVisiable: false,
      editMaterialVisiable: false,
      viewDesignContentVisiable: false,
      viewDesignDocmentVisiable: false,
      designContent: {},
      designDocment: {},
      materialList: [],
      situationForm: {
        project_id: 0,
        project_name: '',
        voltage: 0,
        line_length: 0.0,
        erection_way: 0,
        arrange_way: 0,
        wire: '',
        transformer_way: 0,
        terrain: 0
      },
      submitLoading: false,
    }
  },
  methods: {
    getParams() {
      getSituationParams().then(res => {
        if (res.code === 0) {
          this.situationParams = res.data;
          this.voltageList = res.data.filter(item => item.type == 3);
          this.erectionList = res.data.filter(item => item.type == 4);
          this.arrangeList = res.data.filter(item => item.type == 5);
          this.transformerList = res.data.filter(item => item.type == 6);
          this.terrainList = res.data.filter(item => item.type == 7)
        }
      });
    },
    getList() {
      this.loading = true;
      getSituationList(this.searchForm).then(res => {
        this.loading =false;
        if (res.code === 0) {
          this.data = res.data.raws;
          this.total = res.data.count;
        }
      })
    },
    init() {
      this.getParams();
      this.getList();
    },
    getMaterialList(project_id) {
      getProjectMaterial({project_id}).then(res => {
         if (res.code === 0) {
           this.materialList = res.data.raws;
          getProjectMaterialDefine({project_id}).then(res => {
            if (res.code === 0 && res.data.length > 0) {
              this.materialList.push(...res.data);
            }
          })
         }
      })
    },
    handleSearch() {
      this.searchForm.project_name = this.searchForm.project_name.trim();
      if (this.searchForm.project_name.length > 0) {
        this.searchForm.pageNumber = 1;
        this.getList();
      }
    },
    handleReset() {
      this.searchForm.project_name = '';
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getList();
    },
    addSituation() {
      const hasPermission = util.oneOf('add', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }; 
      this.situationForm.project_id = 0;
      this.situationForm.voltage = 0;
      this.situationForm.line_length = 0.0;
      this.situationForm.erection_way = 0;
      this.situationForm.arrange_way = 0;
      this.situationForm.wire = '';
      this.situationForm.transformer_way = 0;
      this.situationForm.terrain = 0;
      this.situationForm.design_content = '';
      getNewSituationProject().then(res => {
        if (res.code === 0) {
          this.projectNameList = res.data;
        }
      })
      this.addSituationVisible = true;
    },
    editSituation() {
      if (this.selectList.length !== 1) {
        this.$Message.error('必须且只能选择一条记录进行编辑操作');
        return;
      }
      const hasPermission = util.oneOf('edit', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }; 
      this.situationForm.id = this.selectList[0].id;
      this.situationForm.project_id = this.selectList[0].project_id;
      this.situationForm.project_name = this.selectList[0].project_name;
      this.situationForm.voltage = this.selectList[0].voltage;
      this.situationForm.line_length = this.selectList[0].line_length;
      this.situationForm.erection_way = this.selectList[0].erection_way;
      this.situationForm.arrange_way = this.selectList[0].arrange_way;
      this.situationForm.wire = this.selectList[0].wire;
      this.situationForm.transformer_way = this.selectList[0].transformer_way;
      this.situationForm.terrain = this.selectList[0].terrain;
      this.situationForm.design_content = this.selectList[0].design_content;
      this.editSituationVisiable = true;
    },
    viewMaterial() {
      if (this.selectList.length !== 1) {
        this.$Message.error('必须且只能选择一条记录进行查看操作');
        return;
      }
      const project_id = this.selectList[0].project_id;
      this.getMaterialList(project_id);
      this.projectParams.project_code = this.selectList[0].project_code;
      this.projectParams.project_name = this.selectList[0].project_name;
      this.projectParams.material_list_time = this.selectList[0].material_list_time;
      this.projectParams.project_id = this.selectList[0].project_id;
      this.viewMaterialVisiable = true;
    },
    handleDropdown(name) {
      if (this.selectList.length !== 1) {
        this.$Message.error('必须且只能选择一条记录进行查看操作');
        return;
      }
      let id;
      const project_id = this.selectList[0].project_id;
      switch(name) {
        case 'editMaterial':
          this.getMaterialList(project_id);
          this.projectParams.project_code = this.selectList[0].project_code;
          this.projectParams.project_name = this.selectList[0].project_name;
          this.projectParams.material_list_time = this.selectList[0].material_list_time;
          this.projectParams.project_id = this.selectList[0].project_id;
          this.editMaterialVisiable = true;
          break;
        case 'exportBWData':
          getProjectMaterial({project_id}).then(res => {
            if (res.code === 0 && res.data.count > 0) {
              this.exportBWData = res.data.raws;
              getProjectMaterialDefine({project_id}).then(res => {
                if (res.code === 0 && res.data.length > 0) {
                  this.exportBWData.push(...res.data);
                }
              })
              this.$Modal.confirm({
                title: "确认导出",
                content: "您确认要导出博微配电网工程造价格式的物料数据吗?",
                onOk: () => {
                  this.$refs.exportTable.exportCsv({
                    filename: "博微配电网数据"
                  });
                }
              });
            } else {
              this.$Notice.warning({
                title: '没有物料清单数据',
                desc: '还没有物料清单数据，请先编辑项目概况生成清单数据'
              });
            }
          })
          break;
        case 'designContent':
          id = this.selectList[0].id;
          getDesignContent({id}).then(res => {
            if (res.code === 0) {
              this.designContent = res.data;
              this.viewDesignContentVisiable = true;
            }
          })
          break;
        case 'designDocment':
          id = this.selectList[0].id;
          getDesignContent({id}).then(res => {
            if (res.code === 0) {
              this.designContent = res.data;
              getDesignSheets().then(res => {
                if (res.code === 0) {
                  this.designContent.designSheets = res.data;
                  this.viewDesignDocmentVisiable = true;
                }
                
              })
              console.log('this.designContent', this.designContent)
            }
          })
          break;
      }
    },
    refresh() {
      this.getList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getList();
    },
    cancelSituation() {
      this.addSituationVisible = false;
    },
    submitNewSituation() {
      if (this.situationForm.project_id == 0) {
        return
      }
      this.submitLoading = true;
      delete this.situationForm.id;
      insertProjectSituation(this.situationForm).then(res => {
        this.submitLoading = false;
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.addSituationVisible = false;
          this.getList();
        }
      })
    }
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less" scoped>
@import "./situationManager.less";
.margin-bottom-3 {
  margin-bottom: 16px;
}
</style>
